<!-- MeasureInfo.vue -->
<template>
  <view>
    <wd-notice-bar :text="`实际面积(㎡)：${measureInfo.actualArea}，备注：${measureInfo.remark}`" type="info" prefix="warn-bold"   v-if="measureInfo.actualArea && measureInfo.remark" wrapable :scrollable="false" />

	  <wd-collapse v-model="value" class="list">
	    <wd-collapse-item
	      v-for="_ in dictionaryStore.get('decoration_design_order_measure_class')"
	      :key="_.value"
	      :title="_.label"
	      :name="`measureInfo${_.value}`"
	    >
	      <template v-for="info in measureInfoList.filter((item) => item.fileSecondType === _.value)" :key="info.id">
	        <wd-divider>
	          {{ userStore.getUserNameById(info.creator) }} {{ dayjs(info.createTime).format('YYYY-MM-DD HH:mm:ss') }}
	        </wd-divider>
          <view class="file-container">
          <template v-for="(file2, index2) in info.fileUrl" :key="index2">
            <file-preview :file="file2"  />
          </template>
        </view>
			<!-- <wd-img :width="100" :height="100" v-for="_ in info.fileUrl" :src="_.url" :enable-preview="true"/> -->
	      </template>
	    </wd-collapse-item>
	  </wd-collapse>
	  <!-- 悬浮按钮 -->
	  <wd-fab v-if="showFab" type="primary" position="right-bottom" :expandable="false" @click="handleCreate">
	  </wd-fab>
    <!-- 审批框 -->
    <stick-approve-dialog :order-id="props.orderId" approve-type="5" ref="stickyApproveDialogRef5"/>
    <stick-approve-dialog :order-id="props.orderId" approve-type="11" ref="stickyApproveDialogRef11"/>
	
  </view>
</template>
<script setup>
import dayjs from 'dayjs';	
import { ref, computed, watch, onMounted, reactive } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import {
  useDictionaryStore,
  useUserStore,
  usePermissionStore 
} from '@/store/index.js'
import { orderMessageList, getDesignInfoList } from '@/api/order/detail.js'
import stickApproveDialog from '@/packageA/components/stick-approve-dialog/stick-approve-dialog.vue';
import FilePreview from '@/packageA/components/file-preview/file-preview.vue';
const props = defineProps({
  // 订单id
  orderId: {
    type: Number,
    required: true
  },
  approveType: {
    type: String,
  }
});
// 组件注册
// defineOptions({
//   components: {
//     stickApproveDialog,
//   }
// });
const visible = ref(true)
// 字典仓库
 const dictionaryStore = useDictionaryStore()
 // 用户仓库
 const userStore = useUserStore()
// 权限参数
const permissionStore = usePermissionStore()
const hasPermission = (permissions) => {
	console.log(permissionStore.permissions,'permissions');
	console.log(permissionStore.hasPermission(permissions),'ll');
      return permissionStore.hasPermission(permissions)
    }
// 量房信息列表
const measureInfoList = ref([]);
// 量房信息
const measureInfo = reactive({
  actualArea: undefined,
  remark: '',
  result: null,
});
 
const value = ref(['measureInfo1'])
// 处理获取量房信息列表
const handleGetMeasureInfoList = () => {
  uni.showLoading({
			mask: true
		})
  const params = {
    orderId: props.orderId,
    logType: 'measure',
  };
  getDesignInfoList(params)
    .then((data) => {
      if (!data) return;
      measureInfoList.value = data.fileUrls;
      measureInfo.actualArea = data.actualArea;
      measureInfo.remark = data.remark;
      measureInfo.result = data.result;
    })
    .catch((error) => {
    	uni.showToast({
    		title: error,
    		icon: 'error'
    	})
    })
    .finally(() => {
      uni.hideLoading();
    });
};
// 使用computed确保响应式
const showFab = computed(() => {
  return hasPermission('system:order-designer:save-design-info')&&measureInfo.result !== 2&&measureInfo.result !==1
})	
const stickyApproveDialogRef5 = ref(null)
const stickyApproveDialogRef11 = ref(null)
onMounted(() => {
  handleGetMeasureInfoList();
  console.log('Fab should show:', showFab.value) // 再次确认
  if (props.approveType === '5')   stickyApproveDialogRef5.value.open();
  if (props.approveType === '11')  stickyApproveDialogRef11.value.open();

});

const handleCreate = () => {
	uni.navigateTo({
	  url: '/packageA/pages/order/createMessageInfo?orderId='+props.orderId
	})
}

</script>
<style lang="scss" scoped>
  .custom-layout {
	  height: calc(100vh - 300px);
  }
  .file-container {
  	display: flex;
  	flex-wrap: wrap;
    gap: 16px;
  }
</style>